<template>
    <div class="cent w" :ListData="ListData">
      <div class="search clearfix">
        <div class="left nav">
          <span v-for="list in nav" :class="{'check': fromData.status == list.id}" @click="clickFn(list.id)">{{ list.title,list.id}} </span>
        </div>
        <div class="right" style="width: 320px">
          <el-input placeholder="输入订单编号查询" size="small"  class="code" v-model="fromData.code">
            <template slot="append"   > <el-button type="" @click="saechFn(1)"> 搜索</el-button> </template>
          </el-input>
        </div>
      </div>
      <div class="listBox ">
        <div v-show="!errorText">
          <div class="list" v-for="list in tableData2">
            <div class="title clearfix">
              <div class="left">下单时间：{{list.createTime }} </div>
              <div class="left"> 订单号：{{list.number}}</div>
            </div>
            <div class="Box clearfix">
              <div class="left span4 clearfix">
                <div class="imgBoxs left">
                  <img :src="list.imgUrl">
                </div>
                <!-- 起运地址 -->
                <div class="left">
                  <p><span >{{list.origin}} —  </span> <span v-show="list.transitPort"> {{ list.transitPort}} — </span> <span v-show="list.dest">{{ list.dest}}</span></p>
                </div>
              </div>
              <div class="left span12">
                <p>{{list.goodsName }}</p>
                <p>品名</p>
              </div>
              <div class="left span12">
                <p>${{list.cvalue || '0.00'}}</p>
                <p>价格</p>
              </div>
              <div class="left span12">
                <p>{{list.createTime}}</p>
                <p>下单时间</p>
              </div>
              <div class="left span12">
                <p>{{list.status == 1?'待确认':list.status == 2?'已确认':list.status == 3 ? '已提交委托书':list.status == 4 ? '已付款': list.status == 5 ? '在途运输' : list.status == 6 ?'运输完成': list.status == 7? '已失效':'异常'}}</p>
                <p>订单状态</p>
              </div>
              <div class="left span12">
                <p class="goChart" @click="goChart('oderChart',list.id)" style="cursor: pointer">查看详情</p>
              </div>
            </div>
          </div>
          <div class="" style="text-align: right">
            <el-pagination layout="prev, pager, next" :page-count="page.count" @current-change="handleCurrentChange">

            </el-pagination>
          </div>
        </div>
        <div v-show="errorText" style="margin-top: 100px">
           <div class="errorImg">
              <img src="../../../../static/img/icon/oder.png" />
          </div>
          <p style="text-align: center;line-height: 60px;">{{errorText}}</p>
        </div>
      </div>
    </div>
</template>
<style scoped>
  .errorImg{width: 72px;height: 72px;background: #e1e1e1;border-radius:65px;padding: 30px;margin: auto}
  .Box{position: relative;background-color: #fff;border: 1px solid #e1e1e1;}
  p{text-align: left;font-size: 14px;}
  .list{margin-bottom: 10px}
  .search{padding: 40px 0px ;margin-top: 5px}
  .nav span{padding: 5px 5px;margin: 0px 20px 0px 0px;cursor: pointer}
  .nav .check{color: #fff;background-color: #0062a2}
  .span12{width: 12%;box-sizing:border-box; padding: 25px 0px;height: 130px;border-left:1px solid #e1e1e1 }
  .span12 p{line-height: 30px;text-align: center}
  .span12 .goChart{line-height: 60px;color: #0062a2}
  .span4{width: 40%;box-sizing:border-box; padding: 20px 20px}
  .span4 .imgBoxs{width: 120px;height: 90px;background-color: #c0c4cc }
  .imgBoxs img{max-width: 100%;max-height:90px;background-color: #c0c4cc }
  .span4 p{font-size: 16px;font-weight: bold;margin-left: 10px;line-height: 90px}
  .icon img{position: relative;top: 5px}
.title{line-height: 30px;padding: 10px 0px;background-color: #f2f2f2;border: 1px solid #e1e1e1;border-bottom: 0px none}
.title .left, .title .right{padding: 0px 20px;font-size: 12px;color: #000}
.count{ font-size: 18px;padding: 0px 5px}
.cent{padding-bottom: 40px}
  @media only screen and (min-width: 1200px){
    .span12{width: 10%}
    .span4{width: 50%}
  }
  @media only screen and (min-width: 1366px){
    .span12{width: 12%}
    .span4{width: 40%}
  }
  @media only screen and (min-width: 1600px){
    .span12{width: 12%}
    .span4{width: 40%}
  }
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import {mapState, mapActions} from 'vuex'
  import imgdeift from '../../../../static/img/icon/newsDeft.png'
  // import  Public from "../../../vuex/public";
  export default {
    name: 'my-adminChart',
    data () {
      return {
        check:0,
        errorText:'',// '还没有订单哦',
        fromData:{
          status:'',
          code:''
        },
        dialogVisible:false,
        nav:[{
          title:'全部订单',
          id:0,
        },{
          title:'待确认',
          id:1,
        },{
          title:'已确认',
          id:2,
        },{
          title:'已提交委托书',
          id:3,
        },{
          title:'已付款',
          id:4,
        },{
          title:'在途运输',
          id:5,
        },{
          title:'运输完成',
          id:6,
        },{
          title:'已失效',
          id:7,
        }
        ],
       page:{
         page:1,
         pageSize: 10,
         count:0
       },
        tableData2:[]
      }
    },
    methods: {
      ...mapActions({
        // delUser: 'delUserList',
        // showNewsList: 'showNewsList',
        showQuotationList: 'showQuotationList'
      }),
      // 上下页
      handleCurrentChange (val) {
        this.page.page = parseInt(val)
        this.saechFn()
      },
      login () {
        this.$router.push({ name: 'map' })
      },
      // 列表查询
      goChart(name,id){
        this.$router.push({ name: name,query:{id:id}})
      },
      clickFn(id,a){
        this.fromData.status = id
        this.saechFn()
      },
      // 搜索
      saechFn(a){
        if(a){
          this.page.page = 1
          this.fromData.status = 0;
        }
        var parm = {
          page:this.page.page,pageSize:this.page.pageSize
        }
        if(this.fromData.status){
          parm.status=this.fromData.status
        }
        if(this.fromData.code){
          parm.code=this.fromData.code
        }
        this.showQuotationList(parm)
      },
      // 列表解析
      updateListFn(res){
        if (res.body.count) {
          var cunt = res.body.count
          // 取整
          this.page.count = Math.ceil(cunt / this.page.pageSize)
        }
        res = res.body.data
        this.tableData2 = []
        var pu
        for(let i in res){
         pu = {
           "id":res[i].id,
           "number":res[i].number,// 订单号
           "customerName":"",// 公司名称
           "cttName":res[i].cttName,// 联系人
           "cttPhone":res[i].cttPhone,//联系人电话
           "bizType":res[i].bizType==1?'班列':res[i].bizType==2?'直发':res[i].bizType==3?'中转':res[i].bizType==3?'海铁联运':'异常',//运输类型
           "origin":res[i].origin||"",//起始的
           "dest":res[i].dest || '',//目的地
           "status":res[i].status,
           "cartonType":res[i].cartonType,//箱型
           "cartonCount":res[i].cartonCount,//箱量
           "cvalue":res[i].cvalue,// 价值
           "goodsName":res[i].goodsName,
           imgUrl:res[i].imgUrl,
           "createTime":Public.publicLo.timeCheng(res[i].createTime).ymd || '' //下单时间
         }
          this.tableData2.push(pu)
        }
        if(this.tableData2.length>0){
          this.errorText = ''
        }else {
          this.errorText = '还没有订单哦'
        }
      },
    },
    computed: {
      ListData: function () {
        var parm = this.updateList
        if (parm) {
          this.updateListFn(parm)
        }else {
          this.errorText = '还没该类型订单哦'
        }
        return 1
      },
      ...mapState([
        'updateList',
        'updateStatus',
        'language',
        'show'
      ])
    },
    mounted () {
      // var width = document.body.clientWidth;
      // var dom = document.getElementById('main');
      // var w = width-240;
      // dom.style = 'max-width:'+ w +'px';
      this.saechFn()
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
    }
  }
</script>

